import { Avatar, Button, Empty, Flex, Pagination } from "antd"
import { Title } from "../components/Title"
import { useEffect, useState } from "react"
import type { Issue } from "../types/issue"
import { reqGetIssueById } from "../api/issue"
import { useParams } from "react-router"
import { useSelector } from "react-redux"
import type { ROOTSTATE } from "../store"
import { reqAddComment, reqGetCommentByIdsByPage } from "../api/commentApi"
import { CommentItem } from "../components/commentitem"
import type { Comment } from "../types/comment"

export const IssueDetail = ()=>{
    const [nowIssue, setNowIssue] = useState<Issue>()
    const params = useParams()
    const [commentList, setCommentList] = useState<Comment[]>([])
    const { isLogin, user } = useSelector((state: ROOTSTATE)=>state.userStore)
    const [nowP, setNowP] = useState(1)
    const size = 5
    const [total, setTotal] = useState(0)
    const getIssue = async () => {
        const {data} = await reqGetIssueById(params.id!)
        setNowIssue(data)
    }
    const getComments = async () => {
        const res = await reqGetCommentByIdsByPage(params.id!,nowP,5)
        setCommentList(res.data.list)
        setTotal(res.data.total)
    }
    const [value, setValue] = useState("")
    const sendComment = async () => {
        await reqAddComment({
            content: value,
            userId: user._id,
            ids: params.id!,
        })
        setValue("")
        getComments()
    }
    useEffect(()=>{
        console.log(nowP);
        getComments()
    },[nowP])
    useEffect(() => {
        getIssue()
    },[])

    return (
    <Flex vertical gap={30}>
        <Title title="问题详情"></Title>
        <Flex vertical gap={20}>
            <Flex gap={20}>
                <Avatar size={64} src={nowIssue?.user.avatar}></Avatar>
                <Flex vertical flex={1} justify="space-between">
                    <div>{nowIssue?.user.nickname}</div>
                    <Flex gap={20}>
                        <Button size="small" color={nowIssue?.type.color} variant="solid">
                            {nowIssue?.type.typename}
                        </Button>
                        <div>发布于: {nowIssue?.createdAt}</div>
                    </Flex>
                </Flex>
            </Flex>
            <h1>标题: {nowIssue?.title}</h1>
            <div>问题详情: </div>
            <div
            dangerouslySetInnerHTML={{__html: nowIssue?.content || ""}}
            style={{ border: "2px solid skyblue", borderRadius: 8 }}
            ></div>
            <Flex>
                {isLogin? (
                    <Flex gap={20} flex={1}>
                        <Flex vertical gap={10}>
                            <Avatar src={user.avatar} size={64}></Avatar>
                            <Button onClick={sendComment}>发布评论</Button>
                        </Flex>
                        <textarea
                        value={value}
                        onChange={(e)=>setValue(e.target.value)}
                        placeholder="输入评论: "
                        style={{ flexGrow: 1, resize: "none", height: 100 }}
                        ></textarea>
                    </Flex>
                ):(
                    <div>登录后再评论</div>
                )}
            </Flex>
            <Flex vertical gap={20}>
                {commentList.length > 0 ? (
                    <>
                        {commentList.map((item)=>(
                            <CommentItem {...item} key={item._id}></CommentItem>
                        ))}
                        <Pagination
                        current={nowP}
                        pageSize={size}
                        total={total}
                        onChange={(e)=>{
                            console.log(e);
                            setNowP(e)
                        }}
                        ></Pagination>
                    </>
                ):(
                    <Empty description="暂无评论" />
                )}
            </Flex>
        </Flex>
    </Flex>
)
}